<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      border-collapse: collapse;
      width: 300px;
      margin: 100px auto;
    }

    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <table id="table1">
    <tr>
      <td>编号</td>
      <td>姓名</td>
      <td>操作</td>
    </tr>
    <tr>
      <td>001</td>
      <td>李四</td>
      <td>
        <!-- 自定义dom属性 -->
        <button class="delete" id="id1" user-id="1">delete1</button>
      </td>
    </tr>
    <tr>
      <td>002</td>
      <td>王武</td>
      <td>
        <button class="delete" id="id2" user-id="2">delete2</button>
      </td>
    </tr>
  </table>
  <script>
    // 从后端拿到的数据
    var data = [
      {
        id: 001,
        name: '李四'
      },
      {
        id: 002,
        name: '王武'
      }
    ];

    var table = document.getElementById('table1');
    for (var i = 0; i < data.length; i++) {
      table.insertAdjacentHTML('beforeend', `
        <tr>
          <td>${data[i].id}</td>
          <td>${data[i].name}</td>
          <td>
            <button class="delete">delete</button>
          </td>
        </tr>
      `)
    }

    function remove(elem) {
      elem.parentNode.removeChild(elem);
    }

    var btns = document.querySelectorAll('.delete')
    // btns 是一个“数组”，不能直接给数组绑定事件，给数组当中的dom对象帮定事件
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        remove(this.parentNode.parentNode);

        /* 
          实际上删除是删除数据库中的数据,根据id删
        */

        // 取自定义dom属性
        // console.log(this.getAttribute('user-id'));//只能这样取
        console.log(this['user-id']);//取不到

        // 自带的属性，两种方式都能取到
        // console.log(this.getAttribute('id'));
        // console.log(this.id);

        // 给dom对象添加自定义js属性
        this.aa = 666
        console.log(this.aa);

      }
    }

    var obj1 = {
      'user-id': 1111
    }
    console.log(obj1['user-id']);
  </script>
</body>

</html>